
<section class="product">
  <!-- <h1>product Component</h1> -->

  <div class="sy-product">
    <!-- tab切换 -->
    <div class="sy-switch-nav">
        <ul class="pro-tabtitle">
            <li class="sy-switch-nomal" :class='{isbackground:isbackground=="product"}'  v-on:click="tab('product')">自选产品清单</li>
            <li class="sy-switch-nomal" :class='{isbackground:isbackground=="stock"}'  v-on:click="tab('stock')">最新现货</li>
            <li class="sy-switch-nomal" :class='{isbackground:isbackground=="hdpe"}' v-on:click="tab('hdpe')">HDPE</li>
            <li class="sy-switch-nomal" :class='{isbackground:isbackground=="ldpe"}' v-on:click="tab('ldpe')">LDPE</li>
            <li class="sy-switch-nomal" :class='{isbackground:isbackground=="lldpe"}' v-on:click="tab('lldpe')">LLDPE</li>
            <li class="sy-switch-nomal" :class='{isbackground:isbackground=="ppj"}' v-on:click="tab('ppj')">PP均聚</li>
            <span class="sy-pro-add">添加自选产品</span>

        </ul>

        <div class="sy-product-tabcontent" v-show="show1">
                <ul class="inve-list-sty">
                    <li class="inve-list1 inve-nav-list inve-ul-li1">分类</li>
                    <li class="inve-nav-list inve-ul-li2">牌号</li>
                    <li class="inve-nav-list inve-ul-li3">厂家</li>
                    <li class="inve-nav-list inve-ul-li4">数量（吨）</li>
                    <li class="inve-nav-list inve-ul-li5">交货地</li>
                    <li class="inve-nav-list inve-ul-li6">交货方式</li>
                    <li class="inve-nav-list inve-ul-li7">更新时间
                        <img class="inv-imgbtn" src="../../../assets/img/inv/jiantou.png" alt="">
                    </li>
                    <li class="inve-nav-list inve-ul-li8">价格（元）
                        <img class="inv-imgbtn" src="../../../assets/img/inv/jiantou.png" alt="">
                    </li>
                    <li class="inve-nav-list inve-ul-li9">涨跌</li>
                </ul>

                        <ul class="inve-ul">
                            <li class="inve-ul-li inve-ul-li1">LLPED</li>
                            <li class="inve-ul-li inve-ul-li2">18D</li>
                            <li class="inve-ul-li inve-ul-li3">大庆石化</li>
                            <li class="inve-ul-li inve-ul-li4">有货</li>
                            <li class="inve-ul-li inve-ul-li5">广州</li>
                            <li class="inve-ul-li inve-ul-li6">配送</li>
                            <li class="inve-ul-li inve-ul-li7">1分钟前</li>
                            <li class="inve-ul-li inve-ul-li8">
                                ￥1050/吨
                                <img src="../../../assets/img/inv/zoushi.png" alt="">
                                <div class="inve-li-p">
                                    <p class="voucher">
                                        <span class="span">返券</span>
                                        <b class="b">满减</b>
                                    </p>
                                </div>

                            </li>

                            <li class="inve-ul-li inve-ul-li9 ti150">
                                <img src="../../../assets/img/inv/shang.png" alt=""> 150
                              
                              </li>
                            <li class="inve-ul-li inve-ul-li10">
                                <span class="inve-del"><img src="../../../assets/img/inv/del.png" alt=""></span>   
                                <span class="ive-service"><img src="../../../assets/img/inv/tal.png" alt=""></span>  
                                <span class="inve-li-span">立即采购</span>
                                
                            </li>
                           
                        </ul>

                        <ul class="inve-ul inve-ul2">
                            <li class="inve-ul-li inve-ul-li1">LLPED</li>
                            <li class="inve-ul-li inve-ul-li2">18D</li>
                            <li class="inve-ul-li inve-ul-li3">大庆石化</li>
                            <li class="inve-ul-li inve-ul-li4">有货</li>
                            <li class="inve-ul-li inve-ul-li5">广州</li>
                            <li class="inve-ul-li inve-ul-li6">配送</li>
                            <li class="inve-ul-li inve-ul-li7">1分钟前</li>
                            <li class="inve-ul-li inve-ul-li8">
                                ￥1050/吨
                                <img src="../../../assets/img/inv/zoushi.png" alt="">
                                <!-- <div class="inve-li-p"><span class="span">返券</span><b class="b">满减</b></div> -->

                            </li>

                            <li class="inve-ul-li inve-ul-li9 ti150">
                                <img src="../../../assets/img/inv/shang.png" alt=""> 150</li>
                                <li class="inve-ul-li inve-ul-li10">
                                    <span class="inve-del"><img src="../../../assets/img/inv/del.png" alt=""></span>   
                                    <span class="ive-service"><img src="../../../assets/img/inv/tal.png" alt=""></span>  
                                    <span class="inve-li-span">立即采购</span>
                                    
                                </li>
                        </ul>

                        <ul class="inve-ul">
                            <li class="inve-ul-li inve-ul-li1">LLPED</li>
                            <li class="inve-ul-li inve-ul-li2">18D</li>
                            <li class="inve-ul-li inve-ul-li3">大庆石化</li>
                            <li class="inve-ul-li inve-ul-li4 wuhuo">无货</li>
                            <li class="inve-ul-li inve-ul-li5">广州</li>
                            <li class="inve-ul-li inve-ul-li6">配送</li>
                            <li class="inve-ul-li inve-ul-li7">1分钟前</li>
                            <li class="inve-ul-li inve-ul-li8">
                                ￥1050/吨
                                <img src="../../../assets/img/inv/zoushi.png" alt="">
                                <!-- <div class="inve-li-p"><span class="span">返券</span><b class="b">满减</b></div> -->

                            </li>

                            <li class="inve-ul-li inve-ul-li9">
                                <img src="../../../assets/img/inv/xia.png" alt=""> 150</li>
                                <li class="inve-ul-li inve-ul-li10">
                                    <span class="inve-del"><img src="../../../assets/img/inv/del.png" alt=""></span>   
                                    <span class="ive-service"><img src="../../../assets/img/inv/tal.png" alt=""></span>  
                                    <span class="inve-li-span">立即采购</span>
                                    
                                </li>
                        </ul>

                        <ul class="inve-ul inve-ul2">
                            <li class="inve-ul-li inve-ul-li1">LLPED</li>
                            <li class="inve-ul-li inve-ul-li2">18D</li>
                            <li class="inve-ul-li inve-ul-li3">大庆石化</li>
                            <li class="inve-ul-li inve-ul-li4">有货</li>
                            <li class="inve-ul-li inve-ul-li5">广州</li>
                            <li class="inve-ul-li inve-ul-li6">配送</li>
                            <li class="inve-ul-li inve-ul-li7">1分钟前</li>
                            <li class="inve-ul-li inve-ul-li8">
                                ￥1050/吨
                                <img src="../../../assets/img/inv/zoushi.png" alt="">
                                

                                <div class="inve-li-p">
                                    <p class="voucher">
                                        <!-- <span class="span">返券</span> -->
                                        <b class="b">满减</b>
                                    </p>
                                </div>

                            </li>

                            <li class="inve-ul-li inve-ul-li9">
                                <img src="../../../assets/img/inv/xia.png" alt=""> 150</li>
                                <li class="inve-ul-li inve-ul-li10">
                                    <span class="inve-del"><img src="../../../assets/img/inv/del.png" alt=""></span>   
                                    <span class="ive-service"><img src="../../../assets/img/inv/tal.png" alt=""></span>  
                                    <span class="inve-li-span">立即采购</span>
                                    
                                </li>
                        </ul>

                        <ul class="inve-ul">
                            <li class="inve-ul-li inve-ul-li1">LLPED</li>
                            <li class="inve-ul-li inve-ul-li2">18D</li>
                            <li class="inve-ul-li inve-ul-li3">大庆石化</li>
                            <li class="inve-ul-li inve-ul-li4 ">有货</li>
                            <li class="inve-ul-li inve-ul-li5">广州</li>
                            <li class="inve-ul-li inve-ul-li6">配送</li>
                            <li class="inve-ul-li inve-ul-li7">1分钟前</li>
                            <li class="inve-ul-li inve-ul-li8">
                                ￥1050/吨
                                <img src="../../../assets/img/inv/zoushi.png" alt="">
                                <!-- <div class="inve-li-p"><span class="span">返券</span><b class="b">满减</b></div> -->

                            </li>

                            <li class="inve-ul-li inve-ul-li9">
                                <img src="../../../assets/img/inv/xia.png" alt=""> 150</li>
                                <li class="inve-ul-li inve-ul-li10">
                                    <span class="inve-del"><img src="../../../assets/img/inv/del.png" alt=""></span>   
                                    <span class="ive-service"><img src="../../../assets/img/inv/tal.png" alt=""></span>  
                                    <span class="inve-li-span">立即采购</span>
                                    
                                </li>
                        </ul>

                        <ul class="inve-ul inve-ul2">
                            <li class="inve-ul-li inve-ul-li1">LLPED</li>
                            <li class="inve-ul-li inve-ul-li2">18D</li>
                            <li class="inve-ul-li inve-ul-li3">大庆石化</li>
                            <li class="inve-ul-li inve-ul-li4">有货</li>
                            <li class="inve-ul-li inve-ul-li5">广州</li>
                            <li class="inve-ul-li inve-ul-li6">配送</li>
                            <li class="inve-ul-li inve-ul-li7">1分钟前</li>
                            <li class="inve-ul-li inve-ul-li8">
                                ￥1050/吨
                                <img src="../../../assets/img/inv/zoushi.png" alt="">
                                

                                <div class="inve-li-p">
                                    <p class="voucher">
                                        <span class="span">返券</span>
                                        <!-- <b class="b">满减</b> -->
                                    </p>
                                </div>

                            </li>

                            <li class="inve-ul-li inve-ul-li9">
                                <img src="../../../assets/img/inv/xia.png" alt=""> 150</li>
                                <li class="inve-ul-li inve-ul-li10">
                                    <span class="inve-del"><img src="../../../assets/img/inv/del.png" alt=""></span>   
                                    <span class="ive-service"><img src="../../../assets/img/inv/tal.png" alt=""></span>  
                                    <span class="inve-li-span">立即采购</span>
                                    
                                </li>
                        </ul>




        </div>
        <div class="sy-product-tabcontent" style="display:none" v-show="show2">内容2</div>
        <div class="sy-product-tabcontent" style="display:none" v-show="show3">内容3</div>
        <div class="sy-product-tabcontent" style="display:none" v-show="show4">内容4</div>
        <div class="sy-product-tabcontent" style="display:none" v-show="show5">内容5</div>
        <div class="sy-product-tabcontent" style="display:none" v-show="show6">内容6</div>
    </div>

</div>
</section>

